import "./index.scss"
import {useLocation, useNavigate, useOutlet} from "react-router-dom";
import {AnimatePresence, motion} from "framer-motion";
import {useEffect} from "react";
import {usersMe} from "@src/services/userinfo.ts";
import {getUserInfo} from "@src/utils/userInfo"
export default function LogIn() {
    const location = useLocation()
    const navigate = useNavigate();
    const outletElement = useOutlet()
    useEffect(() => {
        const {user, token} = getUserInfo()
        if (!user?.isVisitor) {
            if (token !== undefined) {
                usersMe(token).then((data) => {
                    localStorage.setItem("UserData", JSON.stringify(data.data));
                    navigate("/home")
                })
            }
        } else {
            localStorage.removeItem("UserData");
        }
    }, []);
    return (
        <div className="logIn">
            <AnimatePresence mode="wait">
                {outletElement && (
                    <motion.div
                        key={location.pathname}
                        initial={{opacity: 0, translateY: "30px"}} // 初始状态：透明且从下方50px位置开始
                        animate={{opacity: 1, translateY: "0px"}} // 进入动画：淡入并滑到原位
                        exit={{opacity: 0, translateY: "30px"}} // 退出动画：淡出并滑回下方50px
                        transition={{duration: 0.3, ease: "easeInOut"}} // 动画持续时间和缓动函数
                        className="centered"
                    >
                        {outletElement}
                    </motion.div>)}
            </AnimatePresence>
        </div>
    )
}
